<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
require('echarts/theme/macarons')
import resize from '@/mixins/resize'

import { data, days, hours } from './config/heat'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'rose'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '200px'
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = this.$echarts.init(this.$el, 'macarons')

      this.chart.showLoading({
        text: '加载中...',
        color: '#0efcff',
        textColor: '#0efcff',
        spinnerRadius: 32,
        maskColor: 'rgba(0, 0, 0, 0)',
        zlevel: 0
      })

      setTimeout(() => {
        if (this.chart) {
          this.chart.hideLoading()
          this.chart.setOption({
            title: {
              text: '各国去年(2022年)月碳排放程度',
              textStyle: {
                color: '#fff',
                fontSize: 12
              },
              x: 'center',
              top: '7%'
            },
            tooltip: {
              position: 'top'
            },
            animation: false,
            grid: {
              height: '60%',
              top: '20%'
            },
            xAxis: {
              type: 'category',
              data: hours,
              splitArea: {
                show: true
              },
              axisTick: {
                lineStyle: {
                  color: '#c4c4c4'
                }
              }
            },
            yAxis: {
              type: 'category',
              data: days,
              splitArea: {
                show: true
              },
              axisTick: {
                show: false
              }
            },
            visualMap: {
              show: false,
              min: 0,
              max: 70,
              calculable: true,
              orient: 'horizontal',
              left: 'center',
              bottom: '15%',
              // color: ['#0d59b7', '#bee8ff'],
              inRange: {
                // Sunrise Yellow / 日出
                color: [
                  '#81D4FA',
                  '#64B5F6',
                  '#42A5F5',
                  '#2196F3',
                  '#1E88E5',
                  '#1976D2',
                  '#1565C0',
                  '#0D47A1'
                ]
              }
            },
            series: [
              {
                name: '',
                type: 'heatmap',
                data: data,
                label: {
                  show: true
                },
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          })
        }
      }, 1000)
    }
  }
}
</script>
